import React from 'react';
import { Button, Form, Input, Table, Tabs, InputNumber, message } from 'antd';
import { connect } from 'umi';
import MyDataTable from '@/components/MyDataTable';
import { VendorSelect, CustSelect } from '@/components/FormItemSelect';
import request from '@/utils/request';

const { TabPane } = Tabs;
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            dataSource: [],
        };
    }
    formRef: any = React.createRef();
    componentDidMount() {
        if (this.props.data) {
            var dataSource: any = [];
            var sumCost: number = 0;
            this.props.data.forEach((element: any) => {
                let obj = {
                    partTranId: element.id,
                    partNum: element.partNum,
                    lineDesc: element.partDescription,
                    quantity: element.tranQty < 0 ? -element.tranQty : element.tranQty,
                    ium: element.um,
                    unitCost: element.mtlUnitCost,
                    extCost: element.extCost < 0 ? -element.extCost : element.extCost,
                }
                sumCost += obj.extCost;
                dataSource.push(obj);
            });
            this.setState({ dataSource })
            let firstD = this.props.data[0];
            let datas = {
                vendorNum: firstD.vendorNum,
                custNum: firstD.custNum,
                amount: sumCost,
                invoiceType: this.props.invoiceType
            }
            this.formRef.current.setFieldsValue(datas);
        }
    }
    onFinish = (values: any) => {
        const { dataSource } = this.state;
        console.log('Success:', values);
        console.log('Success:', dataSource);
        request('/api/services/app/Invoice/CreateInvoice', {
            method: 'POST',
            data: {
                node: values,
                items: dataSource
            },
        }).then((response) => {
            if (response) {
                if (response.success) {
                    message.success('创建成功！');
                }
            }
        });
    };
    onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    doubleClick = (record: any) => {
        console.log(record);
    }
    setRowSelection = (items: any) => {
        this.setState({ record: items });
    }
    render() {
        const columns = [
            {
                title: '发票号码',
                dataIndex: 'invoiceNum',
            },
            {
                title: '分录',
                dataIndex: 'invoiceLine',
                width:60
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
            },
            {
                title: '描述',
                dataIndex: 'lineDesc',
                ellipsis: true
            },
            {
                title: '数量',
                dataIndex: 'quantity',
                width: 80
            },
            {
                title: '税额',
                dataIndex: 'taxCost',
                width: 60
            },
            {
                title: '单价',
                dataIndex: 'unitCost',
                width:100
            },
            {
                title: '金额',
                dataIndex: 'extCost',
                width:100
            },
        ];
        const columns2 = [
            {
                title: '物料编码',
                dataIndex: 'partNum',
            },
            {
                title: '描述',
                dataIndex: 'lineDesc',
                ellipsis: true
            },
            {
                title: '数量',
                dataIndex: 'quantity',
            },
            {
                title: '单位',
                dataIndex: 'ium',
            },
            {
                title: '单价',
                dataIndex: 'unitCost',
            },
            {
                title: '金额',
                dataIndex: 'extCost',
            },
        ];
        return (
            <>
                <Tabs defaultActiveKey="1">
                    <TabPane tab="明细" key="1">
                        <Form
                            ref={this.formRef}
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 16 }}
                            onFinish={this.onFinish}
                            onFinishFailed={this.onFinishFailed}
                        >
                            <Form.Item
                                label="发票号码"
                                name="invoiceNum"
                                rules={[{ required: true, message: '发票号码必填!' }]}
                            >
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="发票类型"
                                name="invoiceType"
                                rules={[{ required: true, message: '发票类型必填!' }]}
                                hidden
                            >
                                <Input />
                            </Form.Item>
                            <div hidden={this.props.invoiceType == "INV"}>
                                <VendorSelect
                                    required={true}
                                    showSearch={true}
                                    width={200}
                                    name='vendorNum'
                                    label="供应商"
                                />
                            </div>
                            <div hidden={this.props.invoiceType == "ONV"}>
                                <CustSelect
                                    required={true}
                                    showSearch={true}
                                    width={200}
                                    name='custNum'
                                    label="客户"
                                />
                            </div>
                            <Form.Item
                                label="金额"
                                name="amount"
                            >
                                <InputNumber disabled />
                            </Form.Item>
                            <Form.Item
                                label="备注"
                                name="commentText"
                            >
                                <Input.TextArea />
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 5, span: 16 }}>
                                <Button type="primary" htmlType="submit">
                                    确定
                                </Button>
                            </Form.Item>
                        </Form>
                        <Table
                            rowKey="partTranId"
                            size="small"
                            columns={columns2}
                            dataSource={this.state.dataSource}
                            pagination={false}
                            bordered
                        />
                    </TabPane>
                    <TabPane tab="所有发票" key="2">
                        <MyDataTable
                            act="GetList"
                            columns={columns}
                            showRefresh
                            pageSize={10}
                            control="Invoice"
                            doubleClick={this.doubleClick}
                            rowSelection={(items: any) => this.setRowSelection(items)}>
                        </MyDataTable>
                    </TabPane>
                </Tabs>

            </>
        )
    }
}
export default connect(({ Abp, user }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: user.currentUser,
}))(ViewPage);